██████╗ ███████╗████████╗██╗██████╗ ███████╗██████╗ ██╗ █████╗
██╔══██╗██╔════╝╚══██╔══╝██║██╔══██╗██╔════╝██╔══██╗██║██╔══██╗
██████╔╝█████╗ ██║ ██║██████╔╝█████╗ ██║ ██║██║███████║
██╔══██╗██╔══╝ ██║ ██║██╔═══╝ ██╔══╝ ██║ ██║██║██╔══██║
██║ ██║███████╗ ██║ ██║██║ ███████╗██████╔╝██║██║ ██║
╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝╚═╝ ╚══════╝╚═════╝ ╚═╝╚═╝ ╚═╝
- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
LESS
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
top
mwcaLESS è un mwcqpreprocessore mwcgCSS che estende il normale linguaggio CSS permettendo (oltre alla normale mwcwsintassi dei fogli di stile) anche l'utilizzo di mwdafunzionmwdqi, mwdgoperatori e mwdwvariabili, la nidificazione delle istruzioni, la creazione di "mixin" e numerose altre caratteristiche che rendono il codice più facile da scrivere, da mantenere e da comprendere.
LESS è mweqopen source ed è scritto in mwegJavaScript.
Contents
• Mixin
• Sass
• Note
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Funzionamento
LESS prevede che le istruzioni css siano contenute in un file .less, che godrà sia delle comuni caratteristiche sintattiche del CSS sia delle peculiari istruzioni di LESS. Questo file può essere impiegato in due modi:
• includendo direttamente nella pagina mwgaHTML il file .less insieme a uno script Javascript (di nome mwgqless.js, scaricabile dal sito ufficiale) che, quando il mwggbrowser farà il mwgwrendering della pagina, si occuperà di fare il mwhaparsing compilando codice css che sarà automaticamente inserito all'interno del tag <head></head> del documento html.
• includendo nella pagina HTML il file .css compilato, generato da un mwhgprogramma di terze parti che si occupi di fare il parsing del file .less.
Caratteristiche
Variabili
Le variabili funzionano esattamente come nei normali mwiglinguaggi di programmazione. Possono essere definite tramite il simbolo @.
Ad esempio, il seguente codice:
@rosso: #ff0000;
a {color: @rosso}
h1 {border-color: @rosso;}
strong{background-color: @rosso;}
darà come risultato questo CSS compilato:
a {color: #ff0000}
h1 {border-color: #ff0000;}
strong{background-color: #ff0000;}
L'utilizzo di variabili è molto utile perché consente di modificare in un'unica volta tutte le occorrenze di un certo valore (ad esempio, un codice cromatico mwawesadecimale, un valore in mwbapixel, un mwbqtipo di carattere, ecc.) all'interno dell'intero file LESS.
Nidificazione
In LESS è possibile nidificare le istruzioni, rendendo il codice più compatto, conciso e leggibile.
La linea gerarchica dei selettori ricalcherà la struttura del listato: inserire un selettore tra le istruzioni di un altro selettore farà diventare quel selettore il mwcqfiglio del selettore che lo contiene.
Ad esempio, questa serie di istruzioni:
div{
width: 200px;
p{
font-size: 20px;
strong{
color: blue;
text-decoration: underline;
}
}
}
genererà il seguente CSS compilato:
div{
width: 200px;
}
div p{
font-size: 20px;
}
div p strong{
color: blue;
text-decoration: underline;
}
Mixin
I mixin sono "set di istruzioni" che possono essere richiamati tra le proprietà di qualsiasi selettore. Qualsiasi classe o id può essere usato come mixin. Se si vuole definire un mixin senza che esso compaia come output nel css compilato, è sufficiente posporre una coppia di parentesi tonde () quando il mixin viene definito.
Classe o id come mixin
Codice LESS:
.mixin{
color: red;
font-weight:bold;
}
p{
font-size:18px;
.mixin;
}
CSS compilato:
.mixin{
color: red;
font-weight:bold;
}
p{
font-size:18px;
color: red;
font-weight:bold;
}
Mixin escluso dall'output
Codice LESS:
.mixin(){
color: red;
font-weight:bold;
}
p{
font-size:18px;
.mixin;
}
CSS compilato:
p{
font-size:18px;
color: red;
font-weight:bold;
}
Operatori
LESS permette di effettuare mwawkoperazioni aritmetiche inserendo i valori tra parentesi tonde. Questo è molto utile se combinato con le possibilità offerte dalle variabili.
Ad esempio:
@var: 200px;
div{
width: (@var + 20px );
}
Genererà:
div{
width: 220px;
}
Confronto
Sass
Less si ispira al Sasscite-ref-about-2-0[2]cite-ref-compare-3-0[3]. Sass è stato progettato sia per semplificare che per estendere i CSS, quindi elementi come le parentesi graffe sono stati rimossi dalla sintassi. Less è stato progettato per essere il più vicino possibile ai CSS e, di conseguenza, i CSS esistenti possono essere utilizzati come codice Less validocite-ref-4[4].
Le versioni più recenti di Sass hanno anche introdotto una sintassi simile a CSS chiamata SCSS (Sassy CSS).
Utilizzo sui siti
Less può essere applicato ai siti in diversi modi. Un'opzione è includere il file JavaScript less.js per convertire il codice al volo. Il browser quindi esegue il rendering dell'output CSS. Un'altra opzione è rendere il codice Less in puro CSS e caricare il CSS su un sito. Con questa opzione non vengono caricati file .less e il sito non necessita del convertitore JavaScript less.js.
Software Less
| Nome | Descrizione | Licenza software | piattaforma | Funzionalità |
|---|---|---|---|---|
| WinLess | Compilatore Less GUI | Apache 2.0 [ 5 ] | Windows | Compilatore |
| Crunch | Less editor e compilatore (richiede Adobe AIR) | GPL [ 6 ] | Windows, Mac OS X | Editor del compilatore |
| less.js-windows | Semplice utility da riga di comando per Windows che compilerà file * .less in CSS utilizzando less.js. | Licenza MIT [ 7 ] | Windows | Compilatore |
| less.app | Compilatore Less | Proprietario | Mac OS X | Compilatore |
| CodeKit | Compilatore Less | Proprietario | Mac OS X | Compilatore |
| LessEngine | Compilatore Less | Gratuito | Plugin OpenCart | Compilatore |
| SimpLESS | Compilatore Less | licenza gratuita ma nessuna licenza esplicita [ 8 ] | Windows Mac OS X Linux | Compilatore |
| Chirpy | Compilatore Less | Ms-PL [ 9 ] | Plugin di Visual Studio | Compilatore |
| Mindscape Web Workbench | Evidenziazione della sintassi e IntelliSense per Less e Sass | Proprietario | Plugin di Visual Studio | Evidenziazione della sintassi del compilatore |
| Eclipse Plugin for Less | Plugin Eclipse | EPL 1.0 | Plugin Eclipse | Evidenziazione della sintassi Compilatore di assistenza ai contenuti |
| mod_less | Modulo Apache2 per compilare Less al volo | Open Source | Linux | Compilatore |
| grunt-contrib-less | Node.js Grunt task per convertire Less in CSS | Open Source | Node.js | Compilatore |
| Web Essentials | Estensione di Visual Studio con supporto per Less e Sass | Apache 2.0 | Windows | Evidenziazione della sintassi, assistenza ai contenuti, compilatore |
| clessc | Compilatore C ++ puro | GPL | almeno Windows, Linux, MacOS | Compilatore |
| Less WebCompiler | Compilatore basato sul Web | MIT | almeno Windows, Linux, MacOS | Compilatore, evidenziazione della sintassi, Minifier |
Note
cite-note-whats-wrong-with-css-11. ↑ mwai8What's Wrong With CSS mwajaArchiviatomwaje il 31 gennaio 2014 in mwajiInternet Archivemwajm. What's Wrong With CSS
cite-note-about-22. ↑ mwajgAbout Less About
cite-note-compare-33. ↑ mwajwSass and Less mwaj0Archiviatomwaj4 il 21 giugno 2009 in mwaj8Internet Archivemwaka. Sass and Less
cite-note-44. ↑ mwakumwakymwakcSass/Less Comparison, su mwakggist.github.com.
cite-note-51. mwakw WinLess github Issue "License Information"
cite-note-62. mwalaCrunch's LICENSE.txt at github Crunch's LICENSE.txt at github
cite-note-73. mwalq github license
cite-note-84. mwalg license file at github (placeholder)
cite-note-95. mwalw mwal0Archiviatomwal4 il 16 giugno 2016 in mwal8Internet Archivemwama. Chirpy License Information at CodePlex
Collegamenti esterni
• (EN) Sito ufficiale, su lesscss.org.
• Repository sorgenti di LESS, su github.com.
• mwamcCompilatore per Mac OSX (non più aggiornato), su download.cnet.com.